<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  table {
  border:red 2px solid;
  color:#33ffaa;
 /border-color:#bb22aa;
  }
  table td{
	border:#00ff00 1px solid;
  }
  table td a:link,table td a:visited{
	text-decoration:none;

  }
  table td div{
	background:#66aec1;
	display:none;
  }
  .open{
	display:block;
  }
  .close{
	display:none;
  }
  </style>
  <script type=text/javascript >
	function list(aNode){
		var tdNode=aNode.parentNode;
		//alert(tdNode.nodeName);
		var divNode=tdNode.getElementsByTagName("div")[0];
		var tbNode=document.getElementsByTagName("table")[0];
		var divNodes=tbNode.getElementsByTagName("div");
		for(var x=0;x<divNodes.length;x++){
			if(divNodes[x]==divNode){
				if(divNode.className=="open"){
					divNode.className="close";
				}else{
					divNode.className="open";
				}
			}else{
				divNodes[x].className="close";
			}
			//alert(divNodes[x].nodeName);
		}
	}
  </script>
 </head>
 <body>
	<table>
		<tr>
			<td>
				<a href="javascript:void(0)" onclick="list(this)" >在线好友</a>
				<div>
		   {{ range .}}
  
         <td >{{.Username}}</td>
         <td >{{.Password}}</td>
         <td >{{.Online}} </td>
            {{end}
			</td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" onclick="list(this)" >离线好友</a>
				<div>
				好友1</br>
				好友2</br>
				好友3</br>
				好友4</div>
			</td>
		</tr>
		
		
	</table>
 </body>
</html>